<template>
    <div class="wrapper">
        <div style="width: 350px;height: 400px;margin: 200px auto;padding: 20px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 10px;overflow: auto;">

            <el-form label-width="auto" label-position="right" status-icon :model="user" :rules="rules"
                     ref="registerForm"
                     :hide-required-asterisk="true">

                <div style="margin: 20px 0;text-align: center;font-size: 25px "><b>注 册</b></div>
                <el-form-item label="账号" prop="username">
                    <el-input type="text" v-model="user.username" prefix-icon="el-icon-user-solid"
                              onKeypress="javascript:if(event.keyCode === 32)event.returnValue = false;"
                              placeholder="请输入账号" auto-complete="on"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="user.password" prefix-icon="el-icon-lock" placeholder="请输入密码"
                              onKeypress="javascript:if(event.keyCode === 32)event.returnValue = false;"
                              autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="" prop="checkPass">
                    <el-input type="password" v-model="user.checkPass" prefix-icon="el-icon-lock" placeholder="确认密码"
                              onKeypress="javascript:if(event.keyCode === 32)event.returnValue = false;"
                              autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-input type="text" v-model="user.nickname" placeholder="请输入昵称" autocomplete="off"
                              onKeypress="javascript:if(event.keyCode === 32)event.returnValue = false;"></el-input>
                </el-form-item>

                <div style="text-align: right">
                    <el-button @click="resetForm('registerForm')">重置</el-button>
                    <el-button type="primary" @click="register">注册</el-button>
                    <el-button type="success" @click="$router.push('/login')">返回登录</el-button>
                </div>
            </el-form>

        </div>


    </div>
</template>

<script>
    export default {
        name: "RegisterView",
        data() {
            const checkNickname = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('昵称不能为空'));
                } else {
                    if (this.user.nickname !== '') {
                        this.$refs['registerForm'].validateField('username');
                    }
                    callback();
                }
            };
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.user.checkPass !== '') {
                        this.$refs['registerForm'].validateField('checkPass');
                    }
                    callback();
                }
            };
            const validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.user.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                user: {},
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    nickname: [
                        {validator: checkNickname, trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            register() {
                this.$refs['registerForm'].validate((valid) => {
                    if (valid) {
                        this.request.post("/users/register", this.user).then(res => {
                            if (res.code === '200') {
                                this.$message.success("注册成功");
                                this.$router.push("/login");
                            } else {
                                this.$message.error("注册失败" + res.msg);//失败原因
                            }
                        });
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>
    .wrapper {
        height: 100vh;
        background-image: linear-gradient(to bottom right, #ff81f3, #07fffc);
        overflow: hidden;
    }
</style>